<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div1{
            width: 300px;
        }
    </style>
</head>
<body>  
    <div class="div1" style="background-color: #ccc;">wenben</div>
    <script>
        var d1 = document.getElementsByClassName('div1')[0]
        // 1.通过style只能拿到行内样式
        console.log(d1.style.width); //没有输出
        console.log(d1.style.backgroundColor);
        // 2.第二种拿属性的方式
        console.log(d1.style['background-color']);

        // 3.通过style设置属性  属性的值必须是字符串 并且属性要用驼峰命名
        d1.style.fontSize = "30px"
        d1.style.color="pink"

        // 4.一次性设置多个样式 会吧上面两个单独设置的样式覆盖掉
        d1.style.cssText = "width:200px; border:1px soild red ; margin:0 auto; font-size:40px"   

        

        
    </script>
</body>
</html>